<template>
    <div>
        <el-button size="small" type="primary" @click="goback">返回赏品列表</el-button>
    <el-form :model="basicInfo" status-icon ref="ruleForm" label-width="130px" class="demo-ruleForm">
        <el-form-item label="赏品类型">
            <div>
                <el-select v-model="basicInfo.method_uuid" placeholder="请选择">
                    <el-option v-for="item in optionsMethod" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </el-form-item>
        <el-form-item label="赏品名称" prop="pass">
            <el-input type="text" v-model="basicInfo.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-show="basicInfo.method_uuid == idKongCheId.uuid" label="空车赏达到数量" prop="pass">
            <el-input type="text" v-model="kongcheInfo.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-show="basicInfo.method_uuid == isChuan.uuid" label="串串赏达到数量" prop="pass">
            <el-input type="text" v-model="kongcheInfo.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示价格" prop="pass">
            <el-input type="text" v-model="basicInfo.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="回收价格" prop="pass">
            <el-input type="text" v-model="basicInfo.recovery_price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="赏品描述" prop="pass">
            <el-input type="text" v-model="basicInfo.desc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="赏品数量" prop="pass">
            <el-input type="text" v-model="basicInfo.count" autocomplete="off"></el-input>
        </el-form-item>
            <el-form-item label="上传赏品封面图片">
                <el-upload action="" list-type="picture-card" :http-request="handlePictureCardPreview" ref="upload"
                    :on-change="uploadImg" :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="basicInfo.display_url" alt="" />
                </el-dialog>
            </el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
    </el-form>
    </div>
</template>

<script>
import good from '../../../../api/jurisdiction'
export default {
        data() {
        return {
            game_uuid:'',
            dialogVisible:false,
                basicInfo: {},
                kongcheInfo: {},
                optionsIp: [
                    {
                    label:'海贼',
                    value:'海贼'
                    },
                    {
                    label: '龙珠',
                    value:'龙珠'
                    },
                    {
                    label: '高达',
                    value:'高达'
                    },
                    {
                    label: '潮玩',
                    value:'潮玩'
                    },
                    {
                    label: 'LSP',
                    value:'LSP'
                    },
            ],
                idKongCheId:{},
                isChuan:{},
                optionsDesc: [
                    {
                        label: '普通商品',
                        value: '普通商品'
                    },
                    {
                        label: '无限赏',
                        value: '无限赏'
                    },
                    {
                        label: '空车赏',
                        value: '空车赏'
                    },
                    {
                        label: '串串赏',
                        value: '串串赏'
                    },
                ],
                optionsMethod: [],
            }
    },
        created() {
            this.getGoodsMethod()
            this.game_uuid = this.$route.params.id
        },
    methods: {
        handlePictureCardPreview() {
            
        },
        handleRemove() { },
        goback() {
            this.$router.push("/layout/choushangguanli/quanjushanggoods")
        },
        getGoodsMethod() {
            good.getquanjumethod({ params: { page: 1, limit: 20 } }).then((res) => {
                console.log('获取所有玩法',res)
                let arr =[]
                res.data.data.forEach((item, value) => {
                    arr.push({ label: item.title, value: item.uuid })
                    if (item.title == "空车赏") {
                    this.idKongCheId.title = item.title
                    this.idKongCheId.uuid = item.uuid
                    this.idKongCheId.desc = item.desc
                    this.idKongCheId.game_type = item.game_type
                    }
                })
                    this.optionsMethod = arr //所有玩法
            })
        },
        uploadImg(upFile) {
            let file = upFile.raw
            let newName = file.name.split('.')
            let num = crypto.randomUUID()
            let path = `houtaiguanli/quanjushang/${num}.${newName[newName.length - 1]}`
            good.uploadImg({ "path": path }).then((res) => {
                let result = res.data
                const data = new FormData();
                data.append('key', path);
                data.append('Signature', result.authorization);
                data.append('x-cos-security-token', result.token);
                data.append('x-cos-meta-fileid', result.cos_file_id);
                data.append('file', file, path);
                good.generalAPI(result.url, data).then((a) => {
                    good.downloadImg({
                        file_list: [
                            {
                                fileid: res.data.file_id,
                                max_age: 0
                            }
                        ]
                    }).then((res) => {
                        console.log(res)
                        let yunurl = res.data.file_list[0].download_url
                        this.basicInfo.display_url = yunurl
                        this.$message.success("图片封面上传成功")
                    })
                })
            })  
        },
     
        submit() {
            if (this.basicInfo.display_url) {
                console.log(this.basicInfo)
                good.postquanjugood({
                    name: this.basicInfo.name,
                    display_url: this.basicInfo.display_url,
                    desc_url: this.basicInfo.display_url,
                    price: (this.basicInfo.price - 0) * 100,
                    recovery_price: (this.basicInfo.recovery_price - 0) * 100,
                    desc: this.basicInfo.desc,
                    game_uuid: this.$store.state.game_uuid,
                    method_uuid:this.basicInfo.method_uuid,
                    count: this.basicInfo.count - 0,
                }).then((res) => {
                    console.log('res',res)
                        this.$router.push(
                            {
                                name: "quanjushanggoods",
                                params:{id:this.$store.state.game_uuid}
                            }
                        )
                        this.$message.success(res.data.msg)
                }).catch((error) => {
                    console.log('error',error)
                    // this.$message.warning("命名重复")
                })
            } else {
                this.$message.warning("图片上传中")
            }
        }
        },
    }
</script>

<style lang="less" scoped>
    .el-input{
        width: 400px;
    }
</style>